<template>
  <el-table
    :data="state.tableData"
    border
    style="width: 100%; margin-bottom: 15px"
  >
    <el-table-column prop="name" label="名称" width="180">
      <template #default="scope">
        <span
          v-if="
            state.editRowIndex !== -1 && state.editRowIndex === scope.$index
          "
        >
          <el-input v-model="scope.row.siteName" placeholder="请输入名称" />
        </span>
        <span v-else>{{ scope.row.siteName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="场地类型" width="180">
      <template #default="scope">
        <span
          v-if="
            state.editRowIndex !== -1 && state.editRowIndex === scope.$index
          "
        >
          <el-select
            v-model="scope.row.siteType"
            class="m-2"
            placeholder="请选择场地类型"
          >
            <el-option label="5人制" :value="AreaTypeEnum.FIVE" />
            <el-option label="8人制" :value="AreaTypeEnum.EIGHT" />
            <el-option label="11人制" :value="AreaTypeEnum.ELEVEN" />
            <el-option label="棒球场" :value="AreaTypeEnum.BASEBALL" />
          </el-select>
        </span>
        <span v-else>{{
          scope.row.siteType === AreaTypeEnum.FIVE ? "5人制":scope.row.siteType === AreaTypeEnum.EIGHT ? "8人制" : scope.row.siteType === AreaTypeEnum.ELEVEN ? "11人制": "棒球场"
        }}</span>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="reservationType" label="预定类型" >
      <template #default="scope">
        <el-checkbox-group v-model="scope.row.reservationType">
          <el-checkbox 
            label="整租" 
            :value="ReservationTypeEnum.ALL" 
            :disabled="state.editRowIndex === -1 || (state.editRowIndex !== -1 && state.editRowIndex !== scope.$index)" 
          />
          <el-checkbox 
            label="散客" 
            :value="ReservationTypeEnum.FIT" 
            :disabled="state.editRowIndex === -1 || (state.editRowIndex !== -1 && state.editRowIndex !== scope.$index)"  
          />
        </el-checkbox-group>
      </template>
    </el-table-column> -->
    <el-table-column label="操作">
      <template #default="scope">
        <span
          v-if="
            state.editRowIndex !== -1 && state.editRowIndex === scope.$index
          "
        >
          <el-button @click="addRowSubmit">确认</el-button>
        </span>
        <span v-else>
          <el-button @click="state.editRowIndex = scope.$index">编辑</el-button>
          <el-button @click="deleteArea(scope.$index)">删除</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
  <el-button
    class="mt-4"
    style="width: 100%"
    :disabled="state.editRowIndex !== -1"
    @click="addRow"
    >+ 添加片区</el-button
  >
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, computed, onUpdated, onMounted } from "vue";
import { postUpdateArea } from "@/api/area/index";

enum AreaTypeEnum {
  FIVE = "five",
  EIGHT = "eight",
  ELEVEN = "eleven",
  BASEBALL = "baseball",
}
enum ReservationTypeEnum {
  ALL, // 整租
  FIT, // 散客
}

const props = defineProps(["content"]);
const state = reactive<{
  editRowIndex: number;
  tableData: {
    siteName: string;
    siteType: string;
  }[];
}>({
  editRowIndex: -1,
  tableData: [],
});
const params = computed(() => {
  return props.content;
});

onUpdated(() => {
  state.tableData = props.content.venueSiteList;
});
onMounted(() => {
  state.tableData = props.content.venueSiteList;
});
const addRow = () => {
  state.editRowIndex = state.tableData.length;
  state.tableData.push({
    siteName: "",
    siteType: "",
  });
};
// 新增场地类型
const addRowSubmit = () => {
  const _row = state.tableData[state.editRowIndex];
  if (!_row.siteName) {
    ElMessage({
      message: "请输入名称",
      type: "warning",
    });
    return;
  }
  if (!_row.siteType) {
    ElMessage({
      message: "请选择场地类型",
      type: "warning",
    });
    return;
  }
  params.value.venueSiteList = state.tableData;
  postUpdateArea(params.value).then((res) => {
    ElMessage({
      message: "添加成功",
      type: "success",
    });
  });
  state.editRowIndex = -1;
};
// 删除场地类型
const deleteArea = (index: Number) => {
  ElMessageBox.confirm("确认要删除该场地吗？删除后将无法恢复！", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 删除成功
    state.tableData.splice(index, 1);
    params.value.venueSiteList = state.tableData;
    postUpdateArea(params.value).then((res) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
};
</script>
